import { userSelect } from '../client/util/style/userSelect'

export const style = {
  div: {},
  label: {
    color: 'currentColor',
    width: 'fit-content',
    height: 'fit-content',
  },
  audio: {
    height: '45px',
    width: '100%',
    boxSizing: 'border-box',
  },
  image: {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
  },
  anchor: {},
  checkbox: {
    height: '100%',
    width: '100%',
    color: 'inherit',
    margin: '0',
    backgroundColor: '#00000000',
    padding: '0',
  },
  textfield: {
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    border: 'none',
    borderRadius: '0',
  },
  textarea: {
    width: '100%',
    height: 'fit-content',
    fieldSizing: 'content',
    textAlign: 'left',
    wordWrap: 'break-word',
    wordBreak: 'break-word',
    whiteSpace: 'pre-wrap',
    fontSize: '21px',
    display: 'flex',
    justifyContent: 'center',
    background: 'none',
    padding: '0',
    border: 'none',
    overflowX: 'hidden',
    overflowY: 'auto',
    resize: 'none',
    boxSizing: 'border-box',
    color: 'currentColor',
  },
  slider: {
    height: '18px',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    textAlign: 'center',
    padding: '0',
    margin: '0',
    fontSize: '12px',
    border: 'none',
    borderRadius: '0',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  select: {
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    fontSize: '18px',
    border: 'none',
    borderRadius: '0',
  },
  rect: {
    fill: 'currentColor',
    strokeWidth: '3px',
    stroke: 'currentColor',
  },
  passwordfield: {
    '-webkit-text-security': 'disc',
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    textAlign: 'center',
    padding: '0',
    fontSize: '18px',
    border: 'none',
    borderRadius: '0',
    boxSizing: 'border-box',
  },
  numberfield: {
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    textAlign: 'center',
    padding: '0',
    fontSize: '18px',
    border: 'none',
    borderRadius: '0',
  },
  table: {
    borderCollapse: 'collapse',
  },
  filefield: {
    height: '100%',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    fontSize: '18px',
    border: 'none',
    borderRadius: '0',
  },
  editablefield: {
    height: 'fit-content',
    width: '100%',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    fontSize: '18px',
    border: 'none',
    borderRadius: '0',
  },
  paragraph: {
    color: 'currentColor',
  },
  fieldset: {
    border: '1px solid currentColor',
  },
  text: {
    fill: 'currentColor',
  },
  video: {
    height: '100%',
    width: '100%',
    boxSizing: 'border-box',
    display: 'flex',
  },
  color: {
    display: 'block',
    color: 'inherit',
    backgroundColor: '#00000000',
    padding: '0',
    border: 'none',
    borderRadius: '0',
    width: '32px',
    height: '32px',
  },
  svg: {
    display: 'block',
    width: '100%',
    height: '100%',
    color: 'currentColor',
    boxSizing: 'border-box',
    cursor: 'default',
    ...userSelect('none'),
  },
  circle: {
    fill: 'currentColor',
    stroke: 'currentColor',
    strokeWidth: '1px',
  },
  h1: {
    color: 'currentColor',
    'font-size': '28px',
    'font-weight': '700',
  },
  h2: {
    color: 'currentColor',
    'font-size': '21px',
  },
  h3: {
    color: 'currentColor',
  },
  path: {
    fill: 'none',
    stroke: 'currentColor',
  },
  line: {
    fill: 'none',
    stroke: 'currentColor',
    'stroke-linecap': 'round',
    'stroke-linejoin': 'round',
  },
  icon: {
    display: 'flex',
    width: '100%',
    height: '100%',
    strokeWidth: '1.5px',
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    stroke: 'currentColor',
    fill: 'transparent',
    boxSizing: 'content-box',
    ...userSelect('none'),
  },
  ellipse: {
    fill: 'currentColor',
    stroke: 'currentColor',
    strokeWidth: '1px',
  },
  span: {
    color: 'currentColor',
  },
  button: {
    textAlign: 'center',
    color: 'buttontext',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'space-around',
    boxSizing: 'border-box',
    minWidth: '60px',
    minHeight: '36px',
    padding: '6px',
  },
  canvas: {
    background: 'none',
    touchAction: 'none',
    display: 'block',
    imageResizing: 'pixelated',
    '-webkit-touch-callout': 'none',
    ...userSelect('none'),
  },
}
